<template>
	<view class="content">
		<view class="banner">
			<image class="banner-img" v-if="!linkUel"  :src="special.special.image" mode=""></image>
			<view class="" @click="onLink" v-if="!isPay" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 9;"> </view>
			<video id="myVideo" v-if="linkUel" class="banner-img" :src="linkUel" >
			                                </video>
		</view>
		<view class="c-list-arr flex-height-between">
			<view class="c-list"
			:class="{
				active:tabIndex==1
			}"
			@click="tabIndex=1"
			>课程详情</view>
			<view class="c-list"
			:class="{
				active:tabIndex==2
			}"
			@click="tabIndex=2"
			>课程目录</view>
		</view>
		<view v-if="tabIndex==2" class="borde-padd-24 directory">
			<directory @onLink="onLink" @onLink2="onLink2" :directoryList="directoryList" :isPay="isPay"></directory>
		</view>
		<detailsMel v-if="tabIndex==1" :special="special"></detailsMel>
		<view class="courseDetails-footer borde-padd-24 flex-height-between">
			<view class="icon-style flex-wrap "  @click="specialcollect()" >
				<image class="content-cs" v-if="!iscollect" src='https://zhizhijiaoyu001.oss-cn-shanghai.aliyuncs.com/static/dian.png' mode=""></image>
				<image class="content-cs" v-if="iscollect" src="https://zhizhijiaoyu001.oss-cn-shanghai.aliyuncs.com/static/dianji.png" mode=""></image>
				<text class="size">收藏</text>
			</view>
			<view class="btn" v-if="isPay" >已加入学习</view>
			<view class="btn" @click="openUelCode" v-else>加入学习</view>
		</view>
		<!-- <iframe :src="ifRemInfo" frameborder="0"></iframe> -->
	</view>
</template>

<script>
	import directory from "./components/directory.vue"
	import detailsMel from "./components/details.vue"
	import {
		Request
	} from '@/utils/request.js'
import { setTimeout } from "timers"
	export default {
		components:{
			directory,
			detailsMel
		},
	    data() {
	        return {
				tabIndex:2,
				tabId:'',
				appId:0,
				confing:{},
				uid:'',
				special:{},
				isPay:false,
				directoryList:[],
				userinfo:{},
				updateOpenidInfo:{},
				linkUel:'',
				jsConfig:{
					isjsConfig:false,
				},
				iscollect:false,
	        }
	    },
		onLoad({id,code,state}) {
			this.updateOpenidInfo={id,code,state};
			this.tabId=id || state;
			this.userinfo=JSON.parse(uni.getStorageSync('userinfo')||"{}");
			if(code && this.userinfo){
				this.openUelCode();
			}
			this.specialDetail()
			this.specialgetCourseList();
			this.addLearningRecords();
		},
	    methods: {
			openUelCode(){				
				let {id,code,state}=this.updateOpenidInfo;
				if(!code && this.userinfo.uid){
					this.createOrder();
				}else{
					this.funCtipon();
				}
			},
			funCtipon(){//
				if(!this.userinfo.uid){
					uni.navigateTo({
						url:'/logon/logon/index'
					})
				}
				// /api/special/createOrder
				// if(this.jsConfig.isjsConfig){
				// 	return false;
				// }
				// // /api/user/updateOpenid
				// Request("user/updateOpenid",{
				// 	code:this.updateOpenidInfo.code,
				// 	uid:this.userinfo.uid,
				// 	state:'STATE'
				// }).then((res) => {
				// 	this.createOrder();
				// }).catch((el)=>{
				// 	this.createOrder();
				// })
			},
			WeixinJSBridge(jsConfig){
				console.log(JSON.stringify(jsConfig));
				WeixinJSBridge.invoke('getBrandWCPayRequest', {
					"appId":jsConfig.appId,
					"nonceStr":jsConfig.nonceStr,
					"package":jsConfig.package,
					"signType":jsConfig.signType,
					"paySign":jsConfig.paySign,
					"timeStamp":jsConfig.timestamp
				},(res)=> {
					console.log(res)
					
					// appId: "wxb74939ad5b7e6363"
					// nonceStr: "671348cb70b7d"
					// package: "prepay_id=wx19135107418561c340f27b35ad07480000"
					// paySign: "1F12D5A60197F55D4A2A0D87CE890A89"
					// signType: "MD5"
					// timestamp: "1729317067"
					setTimeout(()=>{
						this.specialDetail();
					},300)
				    if (res.err_msg == "get_brand_wcpay_request:ok") {
						
				        // 使用以上方式判断前端返回,微信团队郑重提示：
				        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
				    }
				});
			},
			createOrder(){
				Request("special/createOrder",{
					special_id:this.tabId,
				},'post').then((res) => {
					console.log(res.result.orderId);
					uni.navigateTo({
						url:`/pages/courseDetails/orderPayment?id=`+res.result.orderId
					})
					// let jsConfig = res.result.jsConfig;
					// this.appId = res.result.jsConfig.appId;				
					// this.jsConfig={
					// 	...jsConfig,
					// 	isjsConfig:true,
					// }
					// // #ifdef H5
					// this.WeixinJSBridge(jsConfig);
					// // #endif
					// // #ifdef MP-WEIXIN
					// 	this.getProviderFun(jsConfig)
					// // #endif
					//点击加入学习之后，需要跳到支付页面。
					
					// if (typeof WeixinJSBridge == "undefined") {
					//     if (document.addEventListener) {
					//         document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
					//     } else if (document.attachEvent) {
					//         document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
					//         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
					//     }
					// } else {
					//     onBridgeReady();
					// }
				})  
			},
			getProviderFun(){
				var orderInfo = {
				  "appid": "wx499********7c70e",  // 应用ID（AppID）
				  "partnerid": "148*****52",      // 商户号（PartnerID）
				  "prepayid": "wx202254********************fbe90000", // 预支付交易会话ID
				  "package": "Sign=WXPay",        // 固定值
				  "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
				  "timestamp": 1597935292,        // 时间戳（单位：秒）
				  "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5 签名
				};
				uni.getProvider({
				    service: 'payment',
				    success: function (res) {
				        console.log(res.provider)
				        if (~res.provider.indexOf('wxpay')) {
				            uni.requestPayment({
				                "provider": "wxpay",  //固定值为"wxpay"
				                "orderInfo": orderInfo, 
				                success: function (res) {
				                    var rawdata = JSON.parse(res.rawdata);
				                    console.log("支付成功");
				                },
				                fail: function (err) {
				                    console.log('支付失败:' + JSON.stringify(err));
				                }
				            });
				        }
				    }
				});
			},
			 
			onLink(e){
				if(!this.isPay){
					uni.showToast({
						title:'请先点击“加入学习”后观看',
						icon:'none',
						duration:3000,
						mask:true
					})
					return false;
				}
				this.linkUel=e.link
			},
			onLink2(e){
				this.linkUel=e.link
			},
		// api/special/collect
		// /api/special/playNum
		addLearningRecords(){
			Request("special/addLearningRecords",{
				 id:this.tabId,
			 }).then((res) => {
			})  
		},
		    specialcollect(){
				Request("special/collect",{
					 id:this.tabId,
				 },'post').then((res) => {
					 this.iscollect=!this.iscollect
				})  
			},
			specialgetCourseList(){
				Request("special/getCourseList",{
					 special_id:this.tabId,
				 }).then(({list,classData,page}) => {
					 // console.log(list,page)
					 classData.map(item=>{
						 console.log(item.id)
					 })
					 this.linkUel=list[0].link;
					 this.directoryList= this.directoryList.concat(list);
					 // this.iscollect=!this.iscollect
				})  
			},
	       specialDetail(){
			 Request("special/detail",{
				 id:this.tabId,
			 }).then(({confing,special,isPay}) => {
				 this.confing=confing;
				 this.isPay=isPay;
				 this.special=special;
				 this.iscollect=special.special.collect
				// const tdata = list || [];
				// this.consultList = this.consultList.concat(tdata);
			})  
		   }

	    }
	}
</script>

<style scoped>
	.content{
		padding-bottom: 90rpx;
		box-sizing: border-box;
	}
	.banner{
		height: 424rpx;
		position: relative;
	}
	.banner-img{
		width: 100%;
		height: 100%;
	
	}
	.c-list-arr{
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border-bottom: 1rpx solid #EDEAEA;
	}
	.c-list{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		width: 50%;
		text-align: center;
		color: #646669;
		text-align: center;
		font-style: normal;
		line-height: 88rpx;
		text-transform: none;
	}
	.c-list.active{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: center;
		font-style: normal;
		position: relative;
		text-transform: none;
	}
	.c-list.active::after{
		content: '';
		position: absolute;
		bottom: -2rpx;
		left: 50%;
		transform: translate(-50%);
		width: 48rpx;
		height: 4rpx;
		background: #3B5EEC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.directory{
		padding-top: 16rpx;
	}
	.courseDetails-footer{
		background: #FFFFFF;
		position: fixed;
		padding:10rpx 24rpx 50rpx 24rpx;
		bottom: 0rpx;
		box-sizing: border-box;
		left: 0;
		width: 100%;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.courseDetails-footer .btn{
		width: 562rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #3B5EEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.icon-style{
		width: 70rpx;
		justify-content: center;
	}
	.icon-style .content-cs{
		width: 40rpx;
		height: 40rpx;
	}
	.icon-style .size{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0D0E0F;
		font-style: normal;
		text-transform: none;
	}
</style>